<template>
  <div class="userBody">
    <!-- 标识栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >知识图谱系统</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <!-- 用户信息 -->
      <el-card class="box-user">
        <template #header>
          <div class="card-header">
            <span>用户信息</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                修改<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="password">用户密码</el-dropdown-item>
                  <el-dropdown-item command="img">用户头像</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <div>
          <img :src="img" alt="没找到头像" width="100px">
        </div>
        <p>用户账号：{{code}}</p>
        <p>用户名称：{{username}}</p>
        <p>用户角色：{{power}}</p>
      </el-card>

      <!-- 用户收藏 -->
      <el-card class="box-collect">
        <template #header>
          <div class="card-header">
            <span>用户收藏</span>
          </div>
        </template>
        <div class="collectMain" v-if="collectList.length">
          <el-row v-for="item in collectList" :key="item.id">
            <el-button type="text" @click="showContent(item)">{{item.knowledgeName}}</el-button>
            <span>{{item.knowledgeTag.replace(/\|/g, '&nbsp;&nbsp;&nbsp;')}}</span>
          </el-row>
        </div>
        <div class="collectMain" v-else>
          <p>用户未收藏知识</p>
        </div>
      </el-card>
    </div>

    <!-- 用户密码修改对话框 -->
    <el-dialog title="用户密码修改" :visible.sync="passwordDialog" width="50%" @close="passwordDialogClose" :close-on-click-modal="false">
      <el-form :model="userForm" label-width="auto">
        <el-form-item label="用户名称">
          <el-input v-model="userForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户旧密码">
          <el-input v-model="userForm.oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="用户新密码">
          <el-input v-model="userForm.newPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="再次输入新密码">
          <el-input v-model="userForm.newPasswordTwo" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialog = false">取 消</el-button>
          <el-button type="primary" @click="changePassword">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户头像修改对话框 -->
    <el-dialog title="用户密码修改" :visible.sync="imgDialog" width="20%" @close="imgDialogClose" :close-on-click-modal="false">
      <el-upload action="" :show-file-list="false" :before-upload="beforeAvatarUpload">
        <img v-if="userForm.img" :src="userForm.img" width="100px">
        <el-button v-else size="small" type="primary">上传头像</el-button>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="imgDialog = false">取 消</el-button>
          <el-button type="primary" @click="editImg()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { updatePassword, listUserLove, uploadFile, updateUser } from '@/assets/api.js'
export default {
  name: 'User',
  created () {
    this.userForm.username = this.username
    this.userForm.id = this.id
    this.getCollectList()
  },
  data () {
    return {
      // 用户修改表单
      userForm: {
        newPassword: '',
        newPasswordTwo: '',
        oldPassword: '',
        username: '',
        id: '',
        img: ''
      },
      // 用户密码修改对话框是否显示
      passwordDialog: false,
      // 用户已收藏的知识
      collectList: [],
      // 修改用户头像对话框
      imgDialog: false
    }
  },
  methods: {
    // 修改下拉菜单选择的操作
    handleCommand (command) {
      if (command === 'password') {
        this.passwordDialog = true
      } else if (command === 'img') {
        this.imgDialog = true
      }
    },
    // 用户密码修改对话框关闭重置表单
    passwordDialogClose () {
      this.userForm.newPassword = ''
      this.userForm.newPasswordTwo = ''
      this.userForm.oldPassword = ''
    },
    // 修改用户密码提交操作
    async changePassword () {
      if (this.userForm.newPassword !== this.userForm.newPasswordTwo) {
        return this.$message.error('两次输入的新密码不相同')
      }
      const { data: res } = await updatePassword(this.userForm)
      if (res.code === 200) {
        this.$message.success(res.msg)
        window.sessionStorage.clear()
        window.location.reload()
      } else {
        this.$message.error(res.msg)
      }
      this.passwordDialog = false
    },
    // 获取知识收藏
    async getCollectList () {
      const {data: res} = await listUserLove()
      if (res.code === 200) {
        this.collectList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 显示内容
    showContent (item) {
      this.$alert(item.knowledgeContent, item.knowledgeName, {
        confirmButtonText: '关闭'
      })
    },
    // 上传头像
    async beforeAvatarUpload (file) {
      const {data: res} = await uploadFile(file)
      if (res.code === 200) {
        this.$message.success(res.msg)
        this.userForm.img = res.data.url
      } else {
        this.$message.error(res.msg)
      }
      return false
    },
    // 关闭用户头像修改重置表单
    imgDialogClose () {
      this.userForm.img = ''
    },
    // 修改用户头像
    async editImg () {
      const {data: res} = await updateUser(this.userForm)
      if (res.code === 200) {
        this.$message.success(res.msg)
        window.sessionStorage.img = this.userForm.img
        this.imgDialog = false
        location.reload()
      } else {
        this.$message.error(res.msg)
      }
    }
  },
  computed: {
    // 返回用户名
    username () {
      return window.sessionStorage.username
    },
    // 返回用户账号
    code () {
      return window.sessionStorage.code
    },
    // 返回用户图片
    img () {
      if (window.sessionStorage.img !== 'null') {
        return window.sessionStorage.img
      } else {
        return '/static/default.png'
      }
    },
    // 返回用户权限
    power () {
      let power = window.sessionStorage.admin
      if (power === '0') {
        return '普通用户'
      } else if (power === '1') {
        return '管理员'
      } else if (power === '3') {
        return '超级管理员'
      }
    },
    // 返回用户id
    id () {
      return window.sessionStorage.id
    }
  }
}
</script>

<style scoped>
  /* 用户信息样式 */
  .box-user {
    float: left;
    width: 500px !important;
    margin-left: 15px;
  }
  .el-dropdown {
    float: right;
  }
  /* 用户收藏样式 */
  .box-collect {
    float: left;
    width: 700px !important;
    margin-left: 30px;
  }
  .collectMain {
    overflow: scroll;
    max-height: 500px;
  }
  .collectMain .el-button {
      font-size: 18px !important;
      margin-right: 10px;
  }
</style>
